<template>
	<view class="order-detail-container">
		<view class="page-header">
			<view class="header-title">订单详情</view>
			<view class="header-subtitle">查看您的订单信息</view>
		</view>

		<view class="content-section">
			<view class="section-header">
				<view class="section-title">
					<view class="title-decoration"></view>
					<text>订单信息</text>
				</view>
			</view>

			<view class="order-info-card">
				<view class="order-status-banner" :class="{'status-active': pageData.paymentStatus == 1}">
					<text>订单状态：{{pageData.paymentStatus == 1 ? '已生效' : '未生效'}}</text>
				</view>
				
				<view class="order-info-item">
					<text class="info-label">姓名</text>
					<text class="info-value">{{pageData.userName}}</text>
				</view>
				
				<view class="order-info-item">
					<text class="info-label">应付金额</text>
					<text class="info-value">￥ {{(pageData.payableFee * 100).toFixed(2)}} 元</text>
				</view>
				
				<view class="order-info-item">
					<text class="info-label">应退金额</text>
					<text class="info-value">￥ {{(pageData.refundFee * 100).toFixed(2)}} 元</text>
				</view>
				
				<view class="order-info-item">
					<text class="info-label">下单时间</text>
					<text class="info-value">{{timestampToDate(pageData.paymentTime)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted
	} from 'vue';
	import {
		timestampToDate,
		getOptions
	} from '@/utils/util';
	import api from '@/utils/api.js';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	
	let pageData = reactive({})
	onMounted(async () => {
		const options = getOptions() // 获取当前页面传来参数
		if(options) {
			try {
				await api.orderInfoDetail({orderId: options.orderId}).then(res => {
					pageData = Object.assign(pageData, res.data)
				})
			} catch (error) {
				console.error('请求失败:', error);
			}
		}
	})

	// 分享给朋友
	onShareAppMessage(() => {
		const options = getOptions();
		return {
			title: '订单详情 - 飞手之家',
			path: options?.orderId ? `/pages/orderDetail/orderDetail?orderId=${options.orderId}` : '/pages/orderDetail/orderDetail',
			imageUrl: '/static/images/head.jpg'
		};
	});

	// 分享到朋友圈
	onShareTimeline(() => {
		const options = getOptions();
		return {
			title: '订单详情 - 飞手之家',
			query: options?.orderId ? `orderId=${options.orderId}` : '',
			imageUrl: '/static/images/head.jpg'
		};
	});
</script>

<style lang="scss" scoped>
.order-detail-container {
	background-color: #f6f8fa;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

.page-header {
	background-color: #2cbaff;
	padding: 40rpx 40rpx 60rpx;
	color: #fff;
	position: relative;
	margin-bottom: 30rpx;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.header-subtitle {
	font-size: 26rpx;
	opacity: 0.9;
}

.content-section {
	width: 92%;
	margin: 0 auto 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	margin-bottom: 30rpx;
}

.section-title {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.title-decoration {
	width: 8rpx;
	height: 32rpx;
	background-color: #2cbaff;
	border-radius: 4rpx;
	margin-right: 16rpx;
}

.order-info-card {
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	border: 1px solid #eaeaea;
	position: relative;
}

.order-status-banner {
	background-color: #f5f5f5;
	padding: 16rpx 24rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #666;
	text-align: center;
}

.status-active {
	background-color: #2cbaff;
	color: #fff;
}

.order-info-item {
	display: flex;
	padding: 24rpx;
	border-bottom: 1px solid #f0f0f0;
}

.order-info-item:last-child {
	border-bottom: none;
}

.info-label {
	width: 180rpx;
	font-size: 28rpx;
	color: #666;
}

.info-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}
</style>